<template>
  <div class="time-line-direction" :style="backgroundColor">
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: "TimeLineDirection",
  computed: {
    backgroundColor() {
      const rgb = 'rgb(' + [
        155 + Math.round(Math.random() * 100),
        155 + Math.round(Math.random() * 100),
        155 + Math.round(Math.random() * 100)
      ].join(',') + ')';
      return `background-color: ${rgb};`;
    }
  }
};
</script>

<style scoped lang="scss">
.time-line-direction {
  padding: 5px;
  border-radius: 5px;
  // color: rgb(255, 255, 255);
  >span {
    font-size: 12px;
    font-family: "Merriweather Sans", sans-serif;
  }
}
</style>
